<template>
    <div class="box">
        <el-table :data="tableData" :empty-text="BaseConfig.claimEmptyText" cell-class-name="pp"
                  header-cell-class-name="pp" height="210px" style="width: 100%">
            <el-table-column label="#" type="index"/>
            <el-table-column label="物资名称" prop="goodsName"/>
            <el-table-column label="物资图片">
                <template #default="scope">
                    <el-avatar :size="50" :src="`/api/images/${scope.row.picture}`"/>
                </template>
            </el-table-column>
            <el-table-column label="申请数量" prop="claimNumber"/>
            <el-table-column label="库存">
                <template #default="scope">
                    <el-text v-if="scope.row.number >= 50">{{ scope.row.number }}</el-text>
                    <el-text v-else type="danger">{{ scope.row.number }}</el-text>
                </template>
            </el-table-column>
            <el-table-column label="需求人" prop="uname"/>
            <el-table-column label="房间编号">
                <template #default="scope">
                    <el-text>{{ scope.row.name }}</el-text>
                </template>
            </el-table-column>
            <el-table-column label="申请状态">
                <template #default="scope">
                    <el-tag v-if="scope.row.status === '同意'">{{ scope.row.status }}</el-tag>
                    <el-tag v-else-if="scope.row.status === '拒绝'" type="info">{{ scope.row.status }}</el-tag>
                    <el-tag v-else type="success">申请中</el-tag>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script lang='ts' setup>
import { onMounted, ref } from 'vue'
import { ClaimDto } from '@/ts/type/Claim'
import ClaimService from '@/api/claimApi'
import { BaseConfig } from '@/config/config'

const tableData = ref<ClaimDto[]>([])
const getClaim = () => {
  ClaimService.getClaimDto()
    .then(res => {
      tableData.value = res.data
    })
}

onMounted(() => {
  getClaim()
})
</script>

<style lang='scss' scoped>
.box {
  height: 210px;
}

:deep(.el-textarea__inner) {
  height: 130px !important;
}

.btnBox {
  margin-top: 20px;
  display: flex;

  .btn {
    margin: auto;
  }
}

:deep(.pp ) {
  text-align: center;
}
</style>